<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{component/head::head}"></div>

<link href="/static/css/register.css" rel="stylesheet">

<body class="text-center">

<main class="form-register" id="app">
  <form class="needs-validation">
    <h1 class="h3 mb-3 fw-normal">注 册</h1>

    <div class="form-floating">
      <input v-model="registerMember.loginName" class="form-control" id="loginNameInput" placeholder="登录名">
      <label for="loginNameInput">登录名</label>
    </div>
    <div class="form-floating">
      <input v-model="registerMember.name" class="form-control" id="nameInput" placeholder="昵称">
      <label for="nameInput">昵称</label>
    </div>
    <div class="form-floating">
      <input v-model="registerMember.passwordOri" type="password" class="form-control" id="passwordInput"
             placeholder="密码">
      <label for="passwordInput">密码</label>
    </div>
    <div class="form-floating">
      <input v-model="registerMember.passwordConfirm" type="password" class="form-control" id="confirmInput"
             placeholder="确认密码">
      <label for="confirmInput">确认密码</label>
    </div>

    <button @click="register" class="w-100 btn btn-lg btn-primary" type="button">注 册</button>
    <p class="mt-3 mb-3 text-muted">
      <a href="/login" class="">已有用户，去登录</a>
    </p>
  </form>
</main>

</body>
</html>
<script>
  const {createApp, ref, onMounted} = Vue;
  const app = createApp({
    setup() {
      const registerMember = ref();
      registerMember.value = {};
      const register = () => {
        // 校验 1 !== 1 只是为了下面格式整齐
        if (1 !== 1
          || !Validator.loginName(registerMember.value.loginName, "用户名")
          || !Validator.length(registerMember.value.name, "昵称", "4", "20")
          || !Validator.password(registerMember.value.passwordOri, "密码")
        ) {
          return;
        }
        if (registerMember.value.passwordOri !== registerMember.value.passwordConfirm) {
          Msg.warning("密码和确认密码不一致!");
          return;
        }
        registerMember.value.password = hexMd5(registerMember.value.passwordOri + KEY);
        registerMember.value.passwordOri = null;
        registerMember.value.passwordConfirm = null;
        axios.post('/system/member/register', registerMember.value).then((response) => {
          const data = response.data;
          if (data.success) {
            Msg.success("注册成功！");
            setTimeout(function () {
              // 跳到登录页面
              window.location.href="login";
            }, 1000);
          } else {
            Msg.error(data.message);
          }
        });
      };

      onMounted(() => {
      });

      return {
        registerMember,
        register,
      }
    }
  });
  app.mount("#app");
</script>
